
<template>
  <div>

    <!-- 条件搜托条 -->
    <div class="topSearch">
      <div class="leftBox">
        <div class="searchbox">
        <em>单据时间：</em>
        <el-date-picker v-model="searchBox.beginTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptionsBegin" style="width:130px;" size="small"></el-date-picker>~
        <el-date-picker v-model="searchBox.endTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptionsEnd" style="width:130px;" size="small"></el-date-picker>
        </div>
        <div class="searchbox">
        <em>学生姓名/身份证号：</em>
        <el-input v-model="searchBox.nameorcard" size="small" style="width:250px" placeholder="请输入学生姓名或身份证号"></el-input>
        </div>
        <div class="searchbox">
        <el-button type="primary" @click="getList" size="mini">查询</el-button>
        </div>
      </div>
      <!-- <div class="rightBox">
         <el-button type="primary" size="mini" @click="exportOut">导出</el-button>
      </div> -->
      <div class="clear"></div>
    </div>

    <div class="contentBox">
      <el-table :data="reportFormList" style="width: 100%">
        <el-table-column label="单据日期" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.createTime|newtime}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="studentName" label="缴费方案"></el-table-column> -->
        <el-table-column prop="recordNumber" label="缴费流水号" width="180"></el-table-column>
        <el-table-column prop="studentName" label="学生姓名" width="120"></el-table-column>
        <el-table-column prop="paymentCategoryName" label="学生类型" width="150"></el-table-column>
        <el-table-column prop="identityCardNumber" label="身份证号" width="200"></el-table-column>
        <el-table-column prop="gradeName" label="就读年级"></el-table-column>
        <el-table-column label="就读班级">
          <template slot-scope="scope">
            <span v-if="scope.row.className==''||scope.row.className==null||scope.row.className==undefined">未分班级</span>
            <span v-else>{{scope.row.className}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isShiftIn" label="是否插班生"></el-table-column>
        <!-- <el-table-column prop="termCount" label="剩余学期数"></el-table-column> -->
        <!-- <el-table-column prop="myScore" label="升学成绩总分"></el-table-column> -->
        <!-- <el-table-column prop="schoolScore" label="学校录取分数线"></el-table-column> -->
        <el-table-column prop="cardMoney" label="刷卡">
          <template slot-scope="scope">
            <span v-if="scope.row.cardMoney==''||scope.row.cardMoney==null||scope.row.cardMoney==undefined">0.00</span>
            <span v-else>{{scope.row.cardMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cashMoney" label="现金">
          <template slot-scope="scope">
            <span v-if="scope.row.cashMoney==''||scope.row.cashMoney==null||scope.row.cashMoney==undefined">0.00</span>
            <span v-else>{{scope.row.cashMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="transferMoney" label="转账">
          <template slot-scope="scope">
            <span v-if="scope.row.transferMoney==''||scope.row.transferMoney==null||scope.row.transferMoney==undefined">0.00</span>
            <span v-else>{{scope.row.transferMoney|moneyStyle}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="实收合计">
          <template slot-scope="scope">
            <!-- <span>{{scope.row.cardMoney+scope.row.cashMoney+scope.row.transferMoney}}</span> -->
            <span>{{heji(scope.row)}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="studentName" label="应收合计"></el-table-column>
        <el-table-column prop="studentName" label="差异"></el-table-column> -->
      </el-table>
      <div class="paging">
        <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :current-page.sync="pageIndex" :total="pageAll"></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "receivable",
  data() {
    return {
      pageIndex:1,
      pageAll:0,
      searchBox:{
         nameorcard:'',
         beginTime:'',
         endTime:''
      },
      reportFormList:[],
      pickerOptionsBegin:{
         disabledDate:time=>{
          return time.getTime() > new Date(this.searchBox.endTime).getTime();
        }
      },
      pickerOptionsEnd:{
         disabledDate:time=>{
          return time.getTime() < new Date(this.searchBox.beginTime).getTime();
        }
      }
    }
  },
  filters:{
    newtime:function(val){
       if(!val) return '';
      return val.slice(0,10);
    },
    moneyStyle(val){
      var nm = 0;
      nm = parseFloat(val).toFixed(2);
      return nm;
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    heji(obg){
      var numq = 0;
      numq = (parseFloat(obg.cardMoney==null?0:obg.cardMoney)*1000+parseFloat(obg.cashMoney==null?0:obg.cashMoney)*1000+parseFloat(obg.transferMoney==null?0:obg.transferMoney)*1000)/1000;
      return parseFloat(numq).toFixed(2);
    },
    // 获取列表
    getList:function(){
      this.searchBox.endTime = this.searchBox.endTime.replace(/00:00:00/,"23:59:59");
      this.$api.trainingReduction.GetSpecialSrainingPayList("list",this.searchBox.nameorcard,this.searchBox.beginTime,this.searchBox.endTime,this.pageIndex).then(res=>{
        //console.log("获取特训报表列表",res);
        this.reportFormList = res.data.result.list;
        this.pageIndex = res.data.result.page;
        this.pageAll = res.data.result.total;
      })
    },
    // 导出操作
    exportOut:function(){
      this.searchBox.endTime = this.searchBox.endTime.replace(/00:00:00/,"23:59:59");
      this.$api.trainingReduction.GetSpecialSrainingPayList("export",this.searchBox.nameorcard,this.searchBox.beginTime,this.searchBox.endTime,this.pageIndex).then(res=>{
        //console.log("导出特训报表列表",res);
      })
    },
    // 分页页面切换
    handleCurrentChange:function(val){
      this.pageIndex = val;
      this.getList();
    }
  }
};
</script>

<style scoped>
</style>
